<template>
  <div id="exactivity">
    <div class="navbanner lunbo" >
			  <img src="../../static/images/61banner.jpg" class=""/>
        <div class="tour-nab">           
            <ul class="nav nav-pills recruit-ul">
               <li>
                    <router-link to="/activity">
                        <a href="javascript:void(0);">优秀作品</a>
                    </router-link>
               </li>
                <li  class="active-underline">
                    <router-link to="/activity/exactivity">
                        <a href="javascript:void(0);">精彩活动</a>
                    </router-link>
                </li>
                <li>
                    <router-link to="/activity/homeducate">
                        <a href="javascript:void(0);">家园共育</a>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>

  <div class="container">
     <h1 class="t_nav">
        <p class="n1">活动风采</p>
        <div class="rt">当前位置：
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/activity' }">活动风采</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/activity/exactivity' }">精彩活动</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
      </h1>
    <div class="navbanner clearfix" style="margin-top: 0;">
      <div class="content">
        <div v-for="(row,index) in sliceList(activities,activities.length)" :key="index">
          <div class="activity-list" v-for="(temp,i) in row" :key="i" @click="toDetail(temp)">
            <div class="relative">
                <a href="#"><img v-if="temp.imgSrc" :src="preUrl+temp.imgSrc" class="activity-img"></a>
                <span  class="activity-head hand">{{temp.title}}</span>
            </div>
            <div class="activity-body hand">
              <span class="activity-detail" v-highlight  v-html="temp.content">本周六孩子们在老师们的带领下...</span>
            </div>
          </div> 
        </div> 
     <!-- 分页 -->
            <div> 
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="pageTotal"
                @current-change="pageChange">
              </el-pagination>
            </div>
      </div>  
    </div>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  data () {
    return {
      activities: [],
      url:{
        activities:"/sunNews/list",
      },
      preUrl: "http://localhost:8080/jeecg-boot/sys/common/static/",
     //分页相关
      pageNo:1,
      pageTotal:10,
      pageSize:3
    }
  },
  components: {
    // 注册组件
  },
 
  created () {
    this.getActivitiesList();
  },
   computed:{
    //实现每n项一分组换行
    sliceList() {
      return function (data,count) {
        if (data != undefined) {
          let index = 0;
          let arrTemp = [];
          for (let i = 0; i < data.length; i++) {
            index = parseInt(i / count);
            if (arrTemp.length <= index) {
              arrTemp.push([]);
            }
            arrTemp[index].push(data[i])
          }
          return arrTemp
        }
      }
    }
  },
  methods: {
    // 获取活动列表
    getActivitiesList(){
      request
        .get(this.url.activities, {
          params: {
            // pageSize:6,
            category: 3,
          },
        })
        .then((res) => {
          if (res.data.success) {
            this.activities = res.data.result.records;
            console.log(this.activities);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    }, 
    //跳转活动详情页面
    toDetail(data){
      this.$router.push("/subjectInfo?id="+data.id)
    },
      //分页点击事件
    pageChange(pageNo){
      this.getNewsList(3,pageNo)
    },
  },
}
</script>

<style>
#exactivity .navbanner .content{
  height: 800px;
  display: flex;
  justify-content: space-between;
}

</style>
